<template>
  <div>
    <h1>画布</h1>
    <canvas id="canvas01"   width=""   height="" ref="canvas01"> 您的浏览器不支持</canvas>
    <canvas id="canvas02"   width=""   height="" ref="canvas02"> 您的浏览器不支持</canvas>
  </div>
</template>

<script>
export default {
  name: "index",
  mounted() {
    let canvas01 = this.$refs.canvas01
    let ctx01 = canvas01.getContext('2d');
    ctx01.rect(50,50,300,300)
    ctx01.fillStyle = 'aqua'
    ctx01.fill()

    ctx01.lineWidth = 20;
    ctx01.strokeStyle = 'salmon'
    ctx01.stroke()

    let canvas02 = this.$refs.canvas02
    let ctx02 = canvas02.getContext('2d');
    ctx02.moveTo(50,50)
    ctx02.lineTo(50, 100)
    ctx02.lineTo(300, 300)
    ctx02.fill()

    ctx02.lineWidth = 20;
    ctx02.strokeStyle = 'aqua'
    ctx02.stroke()
  }
}
</script>

<style scoped>

</style>
